/*
 * @Author: yxfan
 * @Date: 2024-11-06 15:29:59
 * @LastEditTime: 2024-11-06 17:01:36
 * @FilePath: /umi-demo/src/pages/demo/xmind/index.jsx
 * @Description: 脑图插件测试
 */
import { useEffect } from 'react';
import MindMap from './mind-map';
import Drag from './mind-map/src/plugins/Drag';
import './index.less';

const data1 = {
    root: {
        data: {
            text: '根节点',
        },
        children: [
            {
                data: {
                    text: '二级节点1',
                    // "expand": true,
                },
                children: [
                    {
                        data: {
                            text: '分支主题',
                        },
                        children: [
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                                children: [
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                                children: [
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                        children: [
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                                children: [
                                                                    {
                                                                        data: {
                                                                            text: '分支主题',
                                                                        },
                                                                    },
                                                                    {
                                                                        data: {
                                                                            text: '分支主题',
                                                                        },
                                                                    },
                                                                    {
                                                                        data: {
                                                                            text: '分支主题',
                                                                        },
                                                                    },
                                                                    {
                                                                        data: {
                                                                            text: '分支主题',
                                                                        },
                                                                    },
                                                                ],
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                        ],
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                ],
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                ],
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                        ],
                    },
                ],
            },
            {
                data: {
                    text: '二级节点2',
                    // "expand": true,
                },
                children: [
                    {
                        data: {
                            text: '分支主题',
                        },
                    },
                    {
                        data: {
                            text: '分支主题',
                        },
                        children: [
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                        ],
                    },
                    {
                        data: {
                            text: '分支主题',
                        },
                    },
                    {
                        data: {
                            text: '分支主题',
                        },
                    },
                ],
            },
            {
                data: {
                    text: '二级节点3',
                    // "expand": true,
                },
                children: [
                    {
                        data: {
                            text: '分支主题',
                        },
                        children: [
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                                children: [
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                ],
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                        ],
                    },
                ],
            },
            {
                data: {
                    text: '二级节点4',
                    // "expand": true,
                },
                children: [
                    {
                        data: {
                            text: '分支主题',
                        },
                        children: [
                            {
                                data: {
                                    text: '分支主题',
                                },
                                children: [
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                ],
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                                children: [
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                                children: [
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                ],
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                                children: [
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                        children: [
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                            {
                                                                data: {
                                                                    text: '分支主题',
                                                                },
                                                            },
                                                        ],
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                ],
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                ],
                            },
                            {
                                data: {
                                    text: '分支主题',
                                },
                                children: [
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                                children: [
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                    {
                                                        data: {
                                                            text: '分支主题',
                                                        },
                                                    },
                                                ],
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                    {
                                        data: {
                                            text: '分支主题',
                                        },
                                        children: [
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                            {
                                                data: {
                                                    text: '分支主题',
                                                },
                                            },
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        ],
    },
};
MindMap.usePlugin(Drag);

export default () => {
    useEffect(() => {
        initMindMap();
    }, []);

    function initMindMap() {
        const mindMap = new MindMap({
            el: document.getElementById('map-container'),
            isShowExpandNum: true,
            // readonly: true,
            data: data1.root,
            // data: {
            //     "data": {
            //         "text": "根节点"
            //     },
            //     "children": [{
            //         "data": {
            //             "text": "分支主题",
            //         },
            //         "children": [{
            //             "data": {
            //                 "text": "分支主题",
            //             },
            //         }]

            //     },
            //     {
            //         "data": {
            //             "text": "分支主题",
            //         },
            //         "children": [{
            //             "data": {
            //                 "text": "分支主题",
            //             },
            //         }]

            //     }
            //     ]
            // }
        });
        mindMap.on('data_change', (data) => {
            // data数据是不带节点对象的纯数据
            // 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree
            console.log(data);
        });
    }

    return (
        <div className="xmind">
            xmind test
            <div id="map-container"></div>
        </div>
    );
};
